<template>
  <div class="categorys">
    <div class="left">
      <div @click="changeActive(index)" :class="{leftItem:true,active:index == active}" v-for="item,index in categorys_level1" :key="item.id">
        {{item.name}}
      </div>
    </div>
    <div class="right">
      <div v-for="item in categorys_level2" :key="item.id" @click="goProducts(item)">
        <img :src="item.img" />
        <div class="categoryName2">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>


import api from '../api/index'
export default {
  name: 'login',
  components: {
    
  },
  data(){
    return {
      active:0,
      categorys_level1:[],//一级分类、
      categorys_level2:[]
    }
  },
  methods:{
    changeActive(index){
      this.active = index
      this.categorys_level2 = this.categorys_level1[this.active].children
    },
    getCategorys(){
      this.$http({
        url:'/categorys'
      }).then(res => {
        
        let categorys_level1 = [],levelObj = {}
        for(let i = 0; i < res.length; i ++){
          let category = res[i]
          category.img = api.baseURL + category.img
          if(category.level == 1) {
            categorys_level1.push(category)
            levelObj[category.id] = category
            levelObj[category.id].children = []
          }else if(category.level == 2){
            if(levelObj[category.parentId]) levelObj[category.parentId].children.push(category)
          }
        }
        this.categorys_level1 = categorys_level1
        this.categorys_level2 = categorys_level1[this.active].children
      })
    },
    goProducts(item){
      this.$router.push({
        path:'/products',
        query: { key: item.name }
      })
    }
  },
  created(){

  },
  mounted(){
    this.getCategorys(0)
  }
}
</script>

<style scoped>
  .left{
    position: fixed;
    left: 0;
    top:0;
    bottom:0;
    width: 181rem;
    background: #EAEDEF;
    font-size:28rem;
    line-height: 80rem;
    text-align: center;
  }
  .leftItem.active{
    background: #fff;
    color: #000;
    font-weight: bold;
  }
  .right{
    margin-left:190rem;
    color: #000;
  }
  .categoryName2{
    font-size:28rem;
    padding: 16rem 0rem;
    color: #000;
  }
</style>